<template>
	<view style="padding-left: 15rpx;padding-right: 15rpx;">
		<view class="step-index">{{index + 1}}、</view>
		<view class="step-time">环节时间长短:  {{step.duration}}分钟</view>
		
		<view class="step-item">
			<view style="width: 100rpx;">
				<u-image width="100rpx" height="100rpx" src="https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/icon_photo_teacher.png"></u-image>
			</view>
			<view class="chat-bg" style="margin-left: 20rpx;">
				<view v-if="step.teacherSay">(说) {{step.teacherSay}}</view>
				<view v-if="step.teacherAction">(动作) {{step.teacherAction}}</view>
				<view v-if="step.teacherExpression">(表情) {{step.teacherExpression}}</view>
			</view>
		</view>
		
		<view class="step-item">
			<view class="chat-bg" style="margin-right: 20rpx;">
				(回答) {{step.childAnswer}}
			</view>
			<view style="width: 100rpx;">
				<u-image width="100rpx" height="100rpx" src="https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/icon_photo_female.png"></u-image>
			</view>
		</view>
		
		<view class="step-item">
			<view style="width: 100rpx;">
				<u-image width="100rpx" height="100rpx" src="https://dotflat-saas-res.oss-cn-shanghai.aliyuncs.com/xybaby365/app/icons/icon_photo_teacher.png"></u-image>
			</view>
			<view class="chat-bg" style="margin-left: 20rpx;">
				<view v-if="step.teacherBackSay">(回应语言) {{step.teacherBackSay}}</view>
				<view v-if="step.teacherBackAction">(回应动作) {{step.teacherBackAction}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "CourseStepView",
		components: {
		},
		props: {
			step: {
				type: Object,
				default () {
					return {}
				}
			},
			index: {
				type: Number,
				default () {
					return 0
				}
			}
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.step-index{
		margin-top: 10rpx;
	}
	
	.step-time{
		
	}
	
	.step-item{
		display: flex;
		flex-direction: row;
		margin-top: 30rpx;

		.chat-bg{
			flex-grow: 1;
			padding: 15rpx;
			background-color: #E9E9FF;
			border-radius: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
	}
</style>

